<template id="WarningTable">
  <div class="WarningTable">
    <FOURCONCOR />
    <i class="close" @click="changeBoxShow"></i>
    <PaddingCom :title="'卡口管控'">
      <div
        style="
          height: 16vh;
          overflow: hidden;
          padding-bottom: 1vh;
          padding-top: 0.4vh;
          min-height:16vh;
        "
        
      >
        <LISTTABLE
          style="height: 12vh"
          :list="listdata"
          :topData="todata"
          :title="'实时卡口数据墙'"
          @loadingMore="loadingMore"
        />
      </div>

      <COMPANYCUVE
        style="margin-top: 2vh; height: 14vh; max-height: 14vh"
        :title="'24小时各时间段进出分布'"
        :list="zxlist"
      />
      <COMPANYCUVECAR
        style="margin-top: 1vh; height: 17vh"
        :title="'各卡口车辆进出情况'"
        :list="zzlist"
      />
    </PaddingCom>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import PaddingCom from "components/paddingCom";
import LISTTABLE from "components/listable/index";
import COMPANYCUVE from "components/echarts/Companycuve";
import COMPANYCUVECAR from "components/echarts/Companycuvecar";
import FOURCONCOR from "components/fourCorner";
import {
  bayonetcarsrecord,
  inandoutbyhour,
  inandoutbybayonetbar,
} from "api/zyy";
 
export default {
  name: "WarningTable",
  components: {
    PaddingCom,
    LISTTABLE,
    COMPANYCUVE,
    COMPANYCUVECAR,
    FOURCONCOR,
  },
  // 定义属性
  data() {
    return {
      page: 1,
      pageSize: 10,
      listdata: [],
      zxlist: [],
      zzlist: [],
      todata: [
        {
          name: "车牌号",
          deindex: "car_number",
        },
        {
          name: "车辆类型",
          deindex: "type_name",
        },
        {
          name: "卡口",
          deindex: "bayonet",
        },
        {
          name: "通行状态",
          deindex: "status",
          text: false,
        },
        {
          name: "通行时间",
          deindex: "create_time",
        },
      ],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 各卡口车辆进出情况（柱状图）
    async getInandoutBybayonetbar() {
      this.zzlist = [];
      let res = await inandoutbybayonetbar();
      if (this.$iscode(res)) {
        const { data = {} } = res;
        this.zzlist.push(data);
      }
    },
    // 24小时各时间段进出分布
    async getInandoutByhour() {
      this.zxlist = [];
      let res = await inandoutbyhour();
      if (this.$iscode(res)) {
        const { data = {} } = res;
        this.zxlist.push(data);
      }
    },
    // 获取实时卡口数据墙（列表）
    async getBayonetCarsrecord() {
      let res = await bayonetcarsrecord({
        page: this.page,
        pageSize: this.pageSize,
      });
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && (this.listdata = this.listdata.concat(list));
      }
    },
    // 加载更多
    loadingMore() {
      this.page += 1;
      this.getBayonetCarsrecord();
    },
    changeBoxShow() {
      this.$emit("showbox", false);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getInandoutBybayonetbar();
    this.getBayonetCarsrecord();
    this.getInandoutByhour();
   
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.WarningTable {
  position: relative;
width: 19vw;
  padding: 0.78vw 0.78vw;
  background: rgba(11, 58, 113, 0.9);
  .close {
    width: 0.5vw;
    height: 0.5vw;
    display: block;
    position: absolute;
    right: 0.5vw;
    top: 0.5vw;
    background: url("../../../../../../assets/images/indexBody/amapDialog/closeButton.png");
    background-size: 100% 100%;
  }
}
.el-divider {
  background: #499be7;
}
</style>
